<template>
  <div class="quality_analysis">
    <div class="chart_box">
      <div ref="myChart" class="chart_wrapper"></div>
    </div>
  </div>
</template>

<script>

export default {
  components: {},
  name: 'QualityAnalysis',
  data() {
    return {
      isLoading: false, // 加载
      sortData: {}, // 排序对象
    }
  },
  computed: {
    // 图表数据
    listData() {
      return this.$store.state.workshopSummary.QualityListData || []
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    // 刷新
    refresh() {
      this.init()
    },
    // 初始化方法
    init() {
      this.isLoading = true
      let postData = {
        method: 'post',
        url: 'a/turnoverworkstage/turnoverWorkstage/workcentermessgeoverview',
        data: {
          beginCurrentWeekDate: this.moment(window.serverTime).startOf('week').format('YYYY-MM-DD 00:00:00'),
          endCurrentWeekDate: this.moment(window.serverTime).endOf('week').format('YYYY-MM-DD 23:59:59')
        },
        module: 'workshopSummary',
        state: 'QualityListData'
      }
      this.$store.dispatch('saveData', postData).then(() => {
        // 初始化图表数据
        this.drawLine()
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 绘制图表
    drawLine() {
      let myChart = this.$echarts.init(this.$refs.myChart)
      let qualityArr = this.listData.workshopQuanlityList.reduce((pre, cur) => [...pre, cur.count], [])
      let qualityMax = Math.max.apply(Math, qualityArr) > 0 ? Math.max.apply(Math, qualityArr) : (-1 / -Infinity) + 1
      const arrName = [
        {text: '原材料缺陷', color: '#333', max: qualityMax},
        {text: '器材缺陷', color: '#333', max: qualityMax},
        {text: '工艺缺陷', color: '#333', max: qualityMax},
        {text: '设计缺陷', color: '#333', max: qualityMax},
        {text: '设备故障', color: '#333', max: qualityMax},
        {text: '操作失误', color: '#333', max: qualityMax},
        {text: '其他缺陷', color: '#333', max: qualityMax},
      ];
      const arrValue = [0, 0, 0, 0, 0, 0, 0];
      const arrObj = {
        ID_PPR_MaterialDefect: {
          num: 0,
          value: 'materialDefect'
        },
        ID_PPR_EquipmentDefect: {
          num: 1,
          value: 'equipmentDefect'
        },
        ID_PPR_TechnologyDefect: {
          num: 2,
          value: 'technologyDefect'
        },
        ID_PPR_DesignDefect: {
          num: 3,
          value: 'designDefect'
        },
        ID_PPR_DeviceTrouble: {
          num: 4,
          value: 'deviceTrouble'
        },
        ID_PPR_Misoperation: {
          num: 5,
          value: 'misoperation'
        },
        ID_PPR_Others: {
          num: 6,
          value: 'others'
        },
      }
      this.listData.workshopQuanlityList.map(item => {
        arrValue[arrObj[item.faultType].num] = item[arrObj[item.faultType].value] || 0;
      })
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          position: ['70%', '10%'],
          padding: 10,
          textStyle: {
            fontSize: 12,
          },
          backgroundColor: 'rgba(0, 0, 0, 0.85)',
        },
        grid: {
          position: 'center',
        },
        calculable: true,
        polar: [
          {
            name: {
              textStyle: {
                color: '#333'
              }
            },
            indicator: arrName,
            center: ['50%', '52%'],
            radius: 90 //半径
          },
        ],
        series: [
          {
            type: 'radar',
            name: '车间质量',
            itemStyle: {
              normal: {
                color: 'rgb(24,144,255)',
                lineStyle: {
                  color: 'rgb(24,144,255)',
                  width: 2
                },
                areaStyle: {
                  color: 'rgba(33,150,243,0.85)',
                  type: 'default'
                },
              }
            },
            symbolSize: 5,
            data: [{
              value: arrValue
            }]
          },
        ]
      })
    },
  }
}
</script>

<style scoped lang="less">
  .quality_analysis {
    .chart_box {
      .chart_wrapper {
        width: 100%;
        height: 260px;
        box-sizing: border-box;
      }
    }
  }
</style>
